<html>
  <head>
    <title>Dial The Joke - Home</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
      var votingControl = null;
      $(document).ready(function(){
       
        var joke_text_area_selected = false;
        function resetJokeText() {
          joke_text_area_selected = false;
          $("#joke_text").val("Enter your joke");
          $("#joke_text").css("color", "#CCCCCC");
        }        
        $("#joke_text").focus(function() {
          if(!joke_text_area_selected) {
            $(this).val("");
            $(this).css("color", "#000000");
            joke_text_area_selected = true;
          }
        });
        
        $("#joke_text").blur(function() {
          var joke_text = $(this).val();
          if(joke_text.length == 0) {
            resetJokeText();
          }
        });
        
        $("#new_joke_form_button").click(function(){
          if(!joke_text_area_selected) return;
          var joke_text = $("#joke_text").val();
          resetJokeText();
          $.post("/joke/add", {"joke_text":joke_text}, function(data) {
          }, "json");
        });
        
        votingControl = new VotingControl(1);
      });
    </script>
    
    <script src="/static/vote_control.js" type="text/javascript"></script>
    
    <style type="text/css">
      a { 
        color: blue
      }
      
      .global {
        width: 800px;
        margin: auto;
        background: #FFEECC;
        font-family: Verdana;
        font-size: 20pt;
        padding: 20px;
      }      

      .global_font {
        font-family: Verdana;
        font-size: 14pt;
      }

      #header {
        font-size:20pt;
        text-align: center;
        padding-bottom: 20px;
      }
      
      #submission_form {
        background: #FFDDAA;
        padding: 15px;
        margin-bottom: 20px;
      }
      
      #joke_text {
        width: 100%;
        color: #CCCCCC;
      }
      
      #button_container {
        width: 160px;
        margin:auto;
        margin-top: 15px;
      }
      #new_joke_form_button {
        width: 100%;
        font-family: Verdana;
        font-size: 14pt;
        background-color: #DDFFDD;
        padding: 5px;
        border: 1px solid black;
      }
      
      #call_instructions {
        background: #FFDDAA;
        padding: 15px;
        text-align: center;
      }
      
      #voting {
        background: #FFDDAA;
        margin-top: 20px;
        padding: 15px;
        
        font-family: Verdana;
        font-size: 12pt;        
      }
      
      #voting_list {
        list-style-type: none;
        padding: 0px;
        width: 100%;
      }
      
      #voting_list li {
        margin: 5px;
        padding: 5px;
        
        background-color: #FFEECC;
      }

      .clickable_buttons img {
        cursor: pointer;
      }

      #voting_list_container {
        width: 95%;
        margin: auto;
      }
      
      #voting_buttons {
        text-align: center;
      }
      
      #vote_message_box {
        width: 300px;
        height: 100px;
        z-index: 1;
        position: absolute;
        bottom: 10px;
        right: 10px;
        background-color: #aaffaa;
        text-align: center;
        display: none;
        padding: 10px;
      }
      
      #links_section {
        text-align: center;
        font-size: 12pt;
        margin-top: 20px;
      }

    </style>
  </head>
  <body>
    <div id="center_panel" class="global">

      <div id="header">
        Dial-<em>THE</em>-Joke
      </div>

      <div id="submission_form">
        <textarea id="joke_text" autocomplete="off" rows="3" class="global_font" name="joke_text">Enter your joke</textarea>
        <div id="button_container"><button type="button" id="new_joke_form_button">Add Your Joke</button></div>
      </div>

      <div id="call_instructions" class="global_font">
        Call <strong>425-440-0035 </strong> and listen to the featured joke
      </div>
      
      <div id="voting" class="global_font">
        <div style="text-align: center; margin-bottom: 10px; font-size: 20pt;">Vote for the featured joke</div>
        <div id="voting_buttons" class="clickable_buttons">
          <span id="vote_button_first"><img src="/static/resultset_first_disabled.png" /></span>
          <span id="vote_button_previous"><img src="/static/resultset_previous_disabled.png" /></span>
          <span id="voting_page_info">0 of 0</span>
          <span id="vote_button_next"><img src="/static/resultset_next_disabled.png" /></span>
          <span id="vote_button_last"><img src="/static/resultset_last_disabled.png" /></span>
        </div>
        
        <div id="voting_list_container">
          <ul id="voting_list" class="clickable_buttons">
          </ul>
        </div>
      </div>
      <div id="links_section">
        <a href="/">Home</a>
        <a href="/about">About</a>
      </div>      
    </div>
    <div id="vote_message_box" class="global_font">Some test text for this</div>
  </body>
</html>
